@charset "utf-8";

// 公用方法
// 示例 @include boxShadow(0 0 0 0 #000, 0 0 0 0 #fff);
@mixin boxShadow($arguments...) {
    box-shadow: $arguments;
    -webkit-box-shadow: $arguments;
    -moz-box-shadow: $arguments;
    -o-box-shadow: $arguments;
    -ms-box-shadow: $arguments;
}

// 过度 $name:all, $duration:0.5s, $function:linear, $delay:0
// 示例 @include transition(all 0.5s ease-in);
@mixin transition($arguments...) {
    transition: $arguments;
    -webkit-transition: $arguments;
    -moz-transition: $arguments;
    -ms-transition: $arguments;
    -o-transition: $arguments;
}

// 变形
// 示例 @include transform(translate(100px,200px));
@mixin transform($value) {
    transform: $value;
    -webkit-transform: $value;
    -moz-transform: $value;
    -ms-transform: $value;
    -o-transform: $value;
}

/*特别通用模块*/
.clearfix:after{content:"."; display:block; clear:both; visibility:hidden; height:0;font-size: 0;}
.none {display: none !important;}
.hidden { visibility: hidden !important;}
.tl {text-align: left !important;}
.tc {text-align: center !important;}
.tr {text-align: right !important;}
.fr {float: right;}
.fl {float: left;}

// 框架
.m_wrap {position:absolute;top:0;bottom:0;left:0;right:0;}


// 弹出提示
.m_tooltips {
    position: absolute; top: 0; left: 50%; top:50%;opacity: 0;@include transition(all 0.3s ease-in);
    .tooltip-text {
        word-break:break-all; background-color: rgba(0, 0, 0, 0.7);color: #E4E4E4;
        text-align: center; padding: 15px 30px; border-radius: 3px; margin-left: -50%;    margin-top: -50%;
    }
    &.on {
        opacity: 1;
    }
}

// loading
.m_loading {
    position: absolute; top: 0; left: 50%; top:50%;z-index: 2;color: #fff;
    text-align: center; border-radius:5px; display:none; background: rgba(40, 40, 40, 0.75);
    width: 150px;height: 150px; margin-left: -75px;margin-top: -75px;
    .loading__img {
        margin: 26px auto; width: 60px; height: 60px; position: relative;
        background: url(img/loading.gif) center center no-repeat;background-size:100% 100%;
    }
    .loading__mess { }
    &.on {
        display:block;
    }
}
